import React from 'react';
import TopBar from '../common/topbar';
//import $ from '../../../node_modules/jquery';
import $ from 'jquery';
// 产品详情页
class Detail extends React.Component {
    constructor(props) {
        super();
        this.renderProps = null;
        this.state = {
            data: null
        };
    }

    componentWillMount() {

    }

    componentDidMount() {
        let id = this.renderProps.match.params.aaa;
        console.log('id', id);
        let myRequest = 'http://localhost:4000/product/' + id;
        let myInit = {
            method: 'GET',
            mode: 'cors',
            cache: 'default',
            dataType: 'json',
        };
        fetch(myRequest, myInit).then((response) => {
            return response.json();
        }).then((json) => {
            this.setState({data: json.data});
        })
    }

    goBack() {
        this.renderProps.history.goBack();
    }

    goPay(id) {
        //选择产品套餐
        let data1 = this.state.data || '';
        let [p_id, p_title, p_cover,p_price] = [data1.id, data1.title, data1.cover,  data1.price];
        let data = {
            p_id,
            p_title:encodeURIComponent(p_title),
            p_cover:encodeURIComponent(p_cover),
            p_price:encodeURIComponent(p_price),
            o_coupon:null,
            o_copies:document.querySelector('#copies').value
        };
        // data = '{"p_id":3,"p_title":"女装春装首 女装海报","p_cover":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520923650588&di=55230da354cdd8b3170c6aed3f4b87f1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0142135541fe180000019ae9b8cf86.jpg%401280w_1l_2o_100sh.png","p_price":1.1,"o_coupon":null,"o_copies":"1"}';
        console.log('=============生成订单号=========',(data),JSON.stringify(data));
        let myRequest = 'http://localhost:4000/order/create';

        /*let formData = new FormData();
         formData.append("name","admin");
         formData.append("password","admin123");
         let myInit = {
         method: 'POST',
         mode: 'cors',
         body: formData,
         };*/
        /* fetch('http://localhost:2018/1.php', myInit).then((response) => {
         return response.json();
         }).then((json) => {
         console.log('1',json);
         }).catch((err)=>{
         console.log('2',err);
         //    this.props.history.push("/payment/?id=" + id );
         });*/
        /*fetch('http://localhost:4000/order/create', myInit).then((response) => {
         return response.json();
         }).then((json) => {
         console.log('1',json);
         }).catch((err)=>{
         console.log('2',err);
         //    this.props.history.push("/payment/?id=" + id );
         });*/

        $.ajax({
            url: myRequest,
            type: 'POST',
            dataType: 'json',
            data:data,
            cache: false,
            success: function (d) {
                console.log(d);
                if(d.error_code == 0){
                    this.props.history.push("/payment/" + d.data.insertId );
                }
            }.bind(this),
            error: function (xhr, status, err) {
                console.log(status);
            }.bind(this)
        });
        /* $.ajax({
         url: 'http://localhost:2018/1.php',
         type: 'POST',
         dataType: 'json',
         data:{a:1},
         cache: false,
         success: function (d) {
         console.log(d);
         if(d.error_code == 0){
         this.props.history.push("/payment/" + d.data.insertId );
         }
         }.bind(this),
         error: function (xhr, status, err) {
         console.log(status);
         }.bind(this)
         });*/
    }

    render() {
        this.renderProps = this.props;
        let data1 = this.state.data || '';
        let [id, title, cover, desc,price] = [data1.id, data1.title, data1.cover, data1.description, data1.price];

        return (
            <div className="productDetail">
                <TopBar data={this.props} title={title}/>
                <div className="images"><img src={cover} className="cover" alt=""/></div>
                <div className="desc">{desc}</div>
                <div className="price">单价：{price} 元</div>
                <div className="copiesBox">
                    <label htmlFor="name">请选择购买份数：</label>
                    <select className="value" id="copies" defaultValue="1">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div className="ctrl">
                    <button onClick={this.goPay.bind(this, id)}>立即购买</button>
                </div>
            </div>
        )
    }
}


export default Detail;
